<template>
  <div class="main-box">
    <van-floating-bubble  axis="xy" icon="../../src/assets/images/qiandao.png" v-model="offset" @click="qiandao"/>
    <van-nav-bar class="top-title" title="首页" placeholder="true" fixed="true" />
    <div class="box1">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="black" height="200">
        <van-swipe-item
          ><img style="height: 200px; width: 100%" src="../assets/images/1.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img style="height: 200px; width: 100%" src="../assets/images/2.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img style="height: 200px; width: 100%" src="../assets/images/3.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img style="height: 200px; width: 100%" src="../assets/images/4.jpg"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <hr>
    <div class="box2">
        <img src="../assets/images/run.png" >
      <span>跑步周榜</span>
      <div class="card" v-for="i in [0,1,2,3,4]" :key="i">
        <div class="left">
            {{ i+1 }}
        </div>
        <div class="middle">{{ runList[i].name }}</div>
        <div class="right">{{ runList[i].km }}公里</div>
      </div>
    </div>
<hr>
    <div class="box2">
        <img src="../assets/images/bike.png" >
      <span>骑车周榜</span>
      <div class="card" v-for="i in [0,1,2,3,4]" :key="i">
        <div class="left">
            {{ i+1 }}
        </div>
        <div class="middle">{{ bikeList[i].name }}</div>
        <div class="right">{{ bikeList[i].km }}公里</div>
      </div>
    </div>
<hr>
    <div class="box2">
        <img src="../assets/images/jump.png" >
      <span>跳绳周榜</span>
      <div class="card" v-for="i in [0,1,2,3,4]" :key="i">
        <div class="left">
            {{ i+1 }}
        </div>
        <div class="middle">{{ jumpList[i].name }}</div>
        <div class="right">{{ jumpList[i].h }}小时</div>
      </div>
    </div>
    <hr>
  </div>
</template>

<script setup>
import { showToast } from 'vant';
import { ref } from 'vue'

const offset = ref({ x: 400, y: 700 });
var runList = ref([
    {
        id:1,
        name:"赵大",
        km:3502
    },
    {
        id:2,
        name:"钱二",
        km:2821
    },
    {
        id:3,
        name:"三毛",
        km:2622
    },
    {
        id:4,
        name:"周四",
        km:2310
    },
    {
        id:5,
        name:"王五",
        km:1926
    },
    {
        id:6,
        name:"何六",
        km:1709
    },
    {
        id:7,
        name:"白七",
        km:1534
    },
])

var bikeList = ref([
    {
        id:1,
        name:"刘完",
        km:12056
    },
    {
        id:2,
        name:"张图",
        km:9352
    },
    {
        id:3,
        name:"何水",
        km:8423
    },
    {
        id:4,
        name:"丁佛",
        km:6222
    },
    {
        id:5,
        name:"林林",
        km:3156
    },
    {
        id:6,
        name:"蜗牛",
        km:3894
    },
    {
        id:7,
        name:"兔子",
        km:1469
    },
])
var jumpList = ref([
    {
        id:1,
        name:"牛牛",
        h:153
    },
    {
        id:2,
        name:"坤坤",
        h:142
    },
    {
        id:3,
        name:"鹦鹉",
        h:102
    },
    {
        id:4,
        name:"菩提老祖",
        h:72
    },
    {
        id:5,
        name:"玉皇大帝",
        h:69
    },
    {
        id:6,
        name:"王母娘娘",
        h:68
    },
    {
        id:7,
        name:"齐天大圣",
        h:36
    },
])

function qiandao(){
    showToast("签到成功")
}

</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.main-box {
  .box2{
    img{
        width: 50px;
    }
    span{
        font-size: 25px;
        margin-bottom: 30px;
    }
    .card{
        display: flex;
        height: 50px;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        margin-bottom: 10px;
        background: rgb(247,247,247);
        border-radius: 10px;
        margin-left: 3%;
        margin-right: 3%;
        .left{
            font-size: 25px;
        }
        .middle{}
        .right{}
    }
  }
}
</style>
